<template>
    <div class="">
        <!-- banner图 -->
        <div class="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img :src="detail.showImg" />
                    </div>
                    <!-- <div class="swiper-slide">
                        <img src="../../assets/img/bg1.png" />
                    </div> -->
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="banner-top">
                <img @click="$router.go(-1)" src="../../assets/img/fanhui.png" alt />
                <div>
                    <img @click="stars" v-if="star" src="../../assets/img/shoucang.png" alt />
                    <img @click="stars" v-else src="../../assets/img/yishoucang.png" alt />
                    <img  id="share" src="../../assets/img/fenxiang.png" alt />
                </div>
            </div>
        </div>
        <!-- house介绍 -->
        <div class="house-introduce">
            <div class="house-introduce-one">
                <span>{{detail.name}}</span>
                <div>
                    <img @click="stars" v-if="star" src="../../assets/img/shoucang.png" alt />
                    <img @click="stars" v-else src="../../assets/img/yishoucang.png" alt />
                    <span>收藏</span>
                </div>
            </div>
            <div class="house-introduce-two">
                <div>
                    <span>{{detail.oldNewType}}</span>
                    <span>{{detail.propertyTypeName}}</span>
                    <!-- <span>地铁</span> -->
                </div>
                <span>房源编号：{{detail.no}}</span>
            </div>
            <div class="house-introduce-three">￥{{detail.priceRange}}万</div>
            <!-- <div class="house-introduce-four">
                <img src="../../assets/img/dingwei.png" alt />
                <span>泰国曼谷</span>
            </div> -->
        </div>
        <!-- 详情信息 -->
        <div class="house-detail">
            <p>基本信息</p>
            <div class="house-detail-one">
                <div>
                    <span>开发商：{{detail.developer}}</span>
                    <span>产权年限：{{detail.equityLimit}}</span>
                </div>
                <div>
                    <span>规划面积：{{detail.planningAcreage}}m²</span>
                    <span>户数：{{detail.houseNumber}}</span>
                </div>
                <div>
                    <span>交房日期：{{detail.turnRoomTime}}</span>
                    
                    <span>能否贷款：{{detail.loanIs}}</span>
                </div>
            </div>
            <p>在售户型</p>
            <div class="house-detail-two" v-for="(item,index) in houseDetails" :key="index">
                <div class="house-detail-two-bg">
                    <img :src="item.houseImg" alt="">
                </div>
                <p>{{item.houseType}} {{item.acreage}}m²</p>
                <p>￥{{item.price*item.acreage}}万</p>
            </div>
        </div>
        <!-- 介绍更多 -->
        <div class="house-more">
            <p>
                <span>项目视频</span>
            </p>
            <div><img :src="detail.showVideo" alt=""></div>
            <!-- <p>
                <span>地理位置</span>
                <span>信息仅供参考</span>
            </p>
            <div><img src="../../assets/img/bg2.png" alt=""></div> -->
            <p>
                <span>房源描述</span>
            </p>
            <div class="house-more-detail">
                <p>【开发商详情】</p>
                <div>{{detail.projectDetailInfo}}</div>
                <div>
                    <img :src="detail.showVideo" alt="">
                </div>
            </div>
            <div class="house-more-detail">
                <p>【项目周边】</p>
                <div>{{detail.houseDescription}}</div>
                <div>
                    <img :src="detail.showVideo" alt="">
                </div>
            </div>
        </div>
        <!-- 按钮 -->
        <div class="house-btn">
            <div class="house-btn-left">联系</div>
            <div class="house-btn-right">STO</div>
        </div>
    </div>
</template>
<script>
import Swiper from "swiper";
import baseJs from "../../assets/js/base";
export default {
    data() {
        return {
            star: false,
            detail:JSON.parse(this.$route.query.details),
            houseDetails:[]
        };
    },
    created(){
        console.log(this.detail)
        this.houseDetailsNow();
    },
    mounted() {
        //banner初始化
        baseJs.soureDetail();
    },
    methods: {
        houseDetailsNow(){
            this.$axios.get(this.address.houseDetailsNow,{params:{
                projectPropertyId:this.detail.projectPropertyId
            }}).then(res => {
                console.log(res.data)
                this.houseDetails = res.data.data
            })
        },
        //收藏
        stars() {
            this.star = !this.star;
        },
    }
};
</script>
<style lang="less" scoped>
//banner图
.banner {
    width: 100%;
    height: 260px;
    position: relative;
    .swiper-container {
        width: 100%;
        height: 260px;
        z-index: 1;
        .swiper-slide {
            width: 100%;
            height: 260px;
            img {
                width: 100%;
                height: 100% !important;
            }
        }
    }
    .banner-top {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        box-sizing: border-box;
        > img:first-child {
            width: 10px;
        }
        div {
            img:first-child {
                margin-right: 10px;
            }
            img {
                width: 16px;
            }
        }
    }
}
// house介绍
.house-introduce {
    padding: 15px 15px;
    border-bottom: 10px solid @bgcolor3;
    > div {
        margin-bottom: 8px;
    }
    .house-introduce-one {
        .flexBetweenCenter();
        color: @blackColor8;
        font-size: 15px;
        font-weight: bold;
        div:nth-child(2) {
            .flexStartCenter();
            font-size: 15px;
            color: @blackColor7;
            font-weight: normal;
            img {
                width: 18px;
                margin-right: 6px;
            }
        }
    }
    .house-introduce-two {
         .flexBetweenCenter();
        div:nth-child(1) {
            font-size: 12px;
            span {
                border-radius: 4px;
                padding: 2px 4px;
            }
            span:nth-child(1) {
                background-color: #84dea4;
                color: #6cc189;
            }
            span:nth-child(2) {
                background-color: @blueColor5;
                color: #86b1ed;
            }
            span:nth-child(3) {
                background-color: #a89858;
                color: #b4a672;
            }
        }
        span {
            font-size: 12px;
            color: @blackColor7;
        }
    }
    .house-introduce-three {
        font-size: 17px;
        color: @blueColor10;
        font-weight: bold;
    }
    .house-introduce-four {
        font-size: 11px;
        color: @blackColor5;
        img {
            width: 8px;
        }
    }
}
//详情信息
.house-detail {
    padding: 15px 15px 5px;
    box-sizing: border-box;
    border-bottom: 10px solid @blackColor3;
    > p {
        color: @blackColor8;
        font-size: 15px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    > .house-detail-one {
        background-color: @blackColor1;
        height: 98px;
        padding: 8px;
        font-size: 12px;
        color: @blackColor5;
        margin-bottom: 10px;
        .flexColumn();
        > div {
            flex: 1;
            .flexBetweenCenter();
            font-weight: 600;
        }
    }
    > .house-detail-two {
        margin-bottom: 10px;
        div {
            width: 180px;
            height: 96px;
            background-color: @blackColor1;
            margin-bottom: 10px;
        }
        > p:nth-child(2) {
            font-size: 14px;
            color: @blackColor5;
            font-weight: 600;
        }
        > p:nth-child(3) {
            font-size: 16px;
            color: @blueColor10;
            font-weight: bold;
        }
    }
}
// 介绍更多
.house-more {
    padding: 15px 15px 0;
    > p {
        font-size: 15px;
        color: @blackColor8;
        font-weight: bold;
    }
    > p:nth-of-type(2) {
        span:nth-of-type(2) {
            font-size: 12px;
            color: @blackColor5;
            margin-left: 10px;
        }
    }
    > div {
        width: 100%;
        height: 140px;
        background-color: @blackColor1;
        margin: 10px 0;
        overflow: hidden;
    }
    > .house-more-detail {
        background-color: @white;
        height: auto;
        p:nth-of-type(1) {
            color: @blackColor7;
            font-size: 12px;
            font-weight: bold;
        }
        div:nth-child(2) {
            font-size: 12px;
            color: @blackColor7;
        }
        div:nth-child(3) {
            margin: 10px 0 0;
            img{
                width: 100%;
            }
        }
    }
}
// 按钮
.house-btn {
    .flexBetweenCenter();
    padding: 15px;
    margin-bottom: 10px;
    > div {
        width: 48%;
        height: 44px;
        background-color: @blueColor10;
        color: #fff;
        font-size: 16px;
        text-align: center;
        line-height: 44px;
        border-radius: 4px;
    }
}
.house-detail-two-bg{
    overflow: hidden;
}
</style>
